<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap - 增删改查</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
</head>
<!-- 表格 -->
<div class="container" style="padding-top: 40px;">
    <div class="form-group">
        <div class="row">
            <div class="col-md-9">
                <div class="col-md-3">
                    <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
                </div>
        </div>
    </div>
</div>
    <table class="table table-bordered text-center">
        <tr>
            <td>头像</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>入职日期</td>
            <td>职位</td>
            <td>电话号码</td>
            <td>薪水</td>
        </tr>
        <tbody id="showMessage">

        </tbody>
    </table>
    
    <div class="row">
        <div id="show_page_info" class="col-md-4" style="line-height: 80px">
        </div>
        <div id="show_page_nav" class="col-md-8 text-right">
          <nav aria-label="Page navigation">
            <ul class="pagination" id="pagination">
              <li class="disabled" jumpPageNum="1" id="pageone">
                <a href="javascript:;">首页</a>
              </li>
              <li class="disabled" jumpPageNum="1">
                <a href="javascript:;"><span>&laquo;</span></a>
              </li>
              <li jumpPageNum="${pageInfo.getPageNum()+1 }">
                <a href="javascript:;"><span>&raquo;</span></a>
              </li>
              <li jumpPageNum="${pageInfo.getPages() }">
                <a href="javascript:;">末页</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
<!-- 增加的模态框 -->
<div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">增加信息</h4>
            </div>
            <div class="modal-body">
                <form  id="userAddForm" enctype="multipart/form-data">
                    <div class="form-group">
                        <input type="file" placeholder="头像" id="imagePathAdd" name="userImageFile" class="form-control" />
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="姓名" id="empNameAdd" name="empName" class="form-control" />
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="性别" class="form-control" id="genderAdd" name="gender"/>
                    </div>
                    <div class="form-group">
                        <input type="date" placeholder="出生日期" class="form-control" id="birthDateAdd" name="birthDate"/>
                    </div>
                    <div class="form-group">
                        <input type="date" placeholder="入职日期" class="form-control" id="hireDateAdd" name="hireDate"/>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="职位" class="form-control" id="jobTitleAdd" name="jobTitle"/>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="电话号码" class="form-control" id="phoneNumberAdd" name="phoneNumber"/>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="薪水" class="form-control" id="salaryAdd" name="salary"/>
                    </div>
                    <div class="form-group">
                        <img id="showPic" src="" class="img-thumbnail"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<script>
      //获取上传元素
      let bookFile = document.getElementById("imagePathAdd");
        bookFile.onchange = function (){
            //本地预览
            //获取用户选择的图片
            let file = this.files[0];
            console.log(file);
            //给选择图片创建一个url
            let url = URL.createObjectURL(file);
            console.log(file);
            //将地址交给img
            $('#showPic').attr('src',url);
        }
       
        $(function(){
            onleadOk(1);
        })
    //页面加载
    function onleadOk(pageNum){
        $.ajax({
            url:'http://localhost:8182/users/page',
            type:'get',
            data:{
                pageNum:pageNum,
            },
            dataType:'json',
            success:function(data){
                console.log(data)
                if(!data.status){
                    alert(data.message);
                }
                var tbody = $('#showMessage');
                    tbody.empty(); // 清空现有的表格内容
                    //分页信息
                    let pageInfo =$("#show_page_info");
                    pageInfo.empty();
                    let span =`当前${data.data.pageNum}页,总${data.data.pages}页，总共${data.data.total}条记录`;
                    pageInfo.append(span);
                    var pageBox = $("#pageBox");
                    pageBox.empty();

                //分页列
                let pagination = $("#pagination");
                    pagination.empty();

                    //判断是否是首页
                    let firstdis = data.data.isFirstPage ? "disabled" : "";

                    //判断是否是末页
                    let enddis = data.data.isLastPage ? "disabled" : "";



                    //首页
                    let firstLi = `<li class="${firstdis}" jumpPageNum="1">
                                  <a href="javascript:;"><span>首页</span></a>
                                  </li>`;
                    pagination.append(firstLi);

                    let firstLiIcon = `<li class="${firstdis}" jumpPageNum="${data.data.pageNum - 1}">
                                  <a href="javascript:;"><span>&laquo;</span></a>
                                  </li>`;
                    pagination.append(firstLiIcon);


                    //循环页码
                    for (var i = 1; i <= data.data.pages; i++) {
                        let active = '';
                        if (data.pageNum == i) {
                            active = 'active';
                        }
                        let li = `<li class="${active}" jumpPageNum="${i}">
                                  <a href="javascript:;"><span>${i}</span></a>
                                  </li>`;
                        pagination.append(li);
                    }

                    //末页
                    let endLiIcon = `<li class="${enddis}" jumpPageNum="${data.data.pageNum+1}">
                                      <a href="javascript:;"><span>&raquo;</span></a>
                                      </li>`;
                    pagination.append(endLiIcon);

                    let endLi = `<li class="${enddis}" jumpPageNum="${data.data.pages}">
                                         <a href="javascript:;">末页</a>
                                  </li>`;
                    pagination.append(endLi);


                
                data.data.list.forEach(function(employee) {
                    //展示图片
                    let employeePathUrl = employee.imagePath;
                    if(employeePathUrl == null){
                        employeePathUrl = "";
                    }else{
                        employeePathUrl = "http://localhost:8182/" + employeePathUrl;
                    }
                    var row = `<tr>
                         <td>
                                <img style= "width:100px";height:100px; class="img-thumbnail" src='${employeePathUrl}'/>    
                            </td>
                            <td>${employee.empName}</td>
                            <td>${employee.gender}</td>
                            <td>${employee.birthDate}</td>
                            <td>${employee.hireDate}</td>
                            <td>${employee.jobTitle}</td>
                            <td>${employee.phoneNumber}</td>
                            <td>${employee.salary}</td>
                        </tr>
                    `;
                    tbody.append(row);
                });
            }
        })
    }
    
    //增加的功能
    // 在点击增加按钮时处理数据并发送
    $(document).on("click", ".aad", function () {
        //获取表单元素
        let form = document.querySelector('#userAddForm');
        let formData = new FormData(form);
        // 使用JSON.stringify来确保发送的是一个JSON字符串
        $.ajax({
            url: 'http://localhost:8182/users',
            type: 'post',
            data: formData, //发送表单数据
            cache:false,    //设置为false 不需要从浏览器缓存，默认为true
            processData:false, //对数据的处理方式 默认为true，会将数据处理为对象格式
            contentType:false,  //需要设置为false，不然后台拿不到数据
            success: function (data) {
                console.log(data);
                alert("新增成功!")
                onleadOk(1);//刷新列表
            }
        });
        //清除表单数据
        $('#myModal').find("input")
        .each(function(){
            $(this).val("");
        });
    });
    //点击页面 局部刷新
    $(document).on("click","#pagination li",function(){
                onleadOk($(this).attr("jumpPageNum"));
        });

</script>
</body>
</html>
